<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryParams" :inline="true">
            <el-form-item label="任务名称" prop="taskName">
                <el-input
                    v-model="queryParams.taskName"
                    placeholder="请输入任务名称"
                    clearable
                    size="small"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="考评方案" prop="stuEvaPlanId">
                <el-select
                    v-model="queryParams.stuEvaPlanId"
                    clearable
                    filterable
                    placeholder="请选择考评方案"
                    style="width: 100%"
                >
                    <el-option
                    v-for="item in evaPlanOption"
                    :key="item.id"
                    :label="item.planName"
                    :value="item.id"
                    >
                    </el-option
                ></el-select>
            </el-form-item>
            <el-form-item label="考评班级" prop="classId">
                <el-select
                    v-model="queryParams.classId"
                    clearable
                    filterable
                    placeholder="请选择考评班级"
                    style="width: 100%"
                >
                    <el-option
                    v-for="item in classOption"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                    >
                    </el-option
                ></el-select>
            </el-form-item>
            <el-form-item label="考评学年学期" prop="termTimeId">
                <el-select
                    v-model="queryParams.termTimeId"
                    clearable
                    filterable
                    placeholder="请选择考评班级"
                    style="width: 100%"
                >
                    <el-option
                    v-for="item in termTimeOption"
                    :key="item.id"
                    :label="item.remarks"
                    :value="item.id"
                    >
                    </el-option
                ></el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
                >
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                >新增</el-button
                >
            </el-col>
        </el-row>

    <el-table
      v-loading="loading"
      :data="dataList"
    >      
      <el-table-column label="任务编号" prop="id" align="center" width="80px"/>
      <el-table-column label="任务名称" prop="taskName" align="center"/>
      <el-table-column label="考评方案" prop="stuEvaPlanId" align="center" width="200px" show-overflow-tooltip>
        <template slot-scope="scope">
          {{
            getLable(evaPlanOption, scope.row.stuEvaPlanId, "id", "planName")
          }}
        </template>
      </el-table-column>
      <el-table-column label="任务处理人" prop="taskUserId" align="center">
      </el-table-column>

      <el-table-column label="考评班级" prop="classId" align="center">
        <template slot-scope="scope">
          {{
            getLable(classOption, scope.row.classId, "id", "className")
          }}
        </template>
      </el-table-column>
      <el-table-column label="考评学年学期" prop="termTimeId" align="center">
        <template slot-scope="scope">
            {{
                getLable(termTimeOption, scope.row.termTimeId, "id", "remarks")
            }}
        </template>
      </el-table-column>
      <el-table-column label="考评状态" prop="evaStatus" align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.evaStatus === '0'">待评分</span>
            <span v-else-if="scope.row.evaStatus === '1'">评分中</span>
            <span v-else-if="scope.row.evaStatus === '2'">已完成</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" align="center"/>

      <el-table-column label="创建时间" align="center" prop="createTime" >
        <template slot-scope="scope">
          <span v-if="scope.row.createTime">{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" >
        <template slot-scope="scope">
          <el-button
                size="mini"
                circle type="success"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
          />
          <!-- <el-button
                size="mini"
                circle type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
          /> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


        <el-dialog
            :title="title"
            :visible.sync="open"
            width="50%"
            :before-close="handleClose"
        >
        <el-form
            :model="form"
            ref="form"
            :rules="rules"
            label-width="20px"
        >
            <el-form-item label="id" prop="id" v-if="false">
                <el-input v-model="form.id"></el-input
            ></el-form-item>
            <el-form-item label="任务名称" prop="taskName" label-width="100px">
                <el-input
                    style="width: 100%"
                    v-model="form.taskName"
                    placeholder="请输入任务名称"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="考评方案" prop="stuEvaPlanId" label-width="100px">
                <el-select
                    v-model="form.stuEvaPlanId"
                    clearable
                    filterable
                    placeholder="请选择考评方案"
                    style="width: 100%"
                >
                    <el-option
                    v-for="item in evaPlanOption"
                    :key="item.id"
                    :label="item.planName"
                    :value="item.id"
                    >
                    </el-option
                ></el-select>
            </el-form-item>
            <el-form-item label="考评班级" prop="classId" label-width="100px">
                <el-select
                    v-model="form.classId"
                    clearable
                    filterable
                    placeholder="请选择考评班级"
                    style="width: 100%"
                >
                    <el-option
                    v-for="item in classOption"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                    >
                    </el-option
                ></el-select>
            </el-form-item>
            <el-form-item label="学年学期" prop="termTimeId" label-width="100px">
                <el-select
                    v-model="form.termTimeId"
                    clearable
                    filterable
                    placeholder="请选择学年学期"
                    style="width: 100%"
                >
                    <el-option
                    v-for="item in termTimeOption"
                    :key="item.id"
                    :label="item.remarks"
                    :value="item.id"
                    >
                    </el-option
                ></el-select>
            </el-form-item>


            <el-form-item label="备注" prop="remark" label-width="100px">
                <el-input
                    style="width: 100%"
                    v-model="form.remark"
                    type="textarea"
                >    
                </el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">提 交</el-button>
            <el-button @click="handleClose">取 消</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>

import { findStuEvaPlanPageList} from "@/api/stu/evaluation/plan";
import { findStuEvaTaskPageList,createStuEvaTask} from "@/api/stu/evaluation/task";

import { findSchoolClassPageList} from "@/api/classManage/classInfo";
import { listTermtime} from "@/api/system/termtime";

export default {
    name: "plan",
    data(){
        return{
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 表格数据
            dataList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            //查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            }, 
            // 表单参数
            form: {
            },
            rules:{
                taskName: [
                    { required: true, message: "必填", trigger: "blur" }
                ],
                stuEvaPlanId: [
                    { required: true, message: "必填", trigger: "blur" }
                ],
                classId: [
                    { required: true, message: "必填", trigger: "blur" }
                ],
                termTimeId: [
                    { required: true, message: "必填", trigger: "blur" }
                ],              
            },
            evaPlanOption:[],
            classOption:[],
            termTimeOption:[]
        }
    },
    created() {
        this.getList();
        this.getEvaPlan();
        this.getAllClass();
        this.getTermTime();
    },
    methods:{
        //获取考评方案
        getEvaPlan(){
            findStuEvaPlanPageList({"pageNum":1,"pageSize":10000}).then(resp =>{
                this.evaPlanOption = resp.data.list
                // console.log(this.evaPlanOption)

            })
        },
        //获取所有班级
        getAllClass(){
            findSchoolClassPageList({pageSize:500,pageNum:1,status:1,isGraduation:0}).then(resp=>{
                this.classOption = resp.data.list
            })
        },
        //获取学年学期
        getTermTime(){
            listTermtime({"pageNum":1,"pageSize":10000}).then(resp =>{
                this.termTimeOption = resp.data.list
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置查询 */
        resetQuery() {
            this.resetForm("queryParams");
            this.handleQuery();
        },
        /** 关闭弹窗 */
        handleClose(done) {
          this.open = false
        },
        /** 重置表单 */
        reset() {
          this.form = {
            id:undefined,
            taskName:undefined,
            stuEvaPlanId:undefined,
            classId:undefined,
            termTimeId:undefined,
            remark:undefined,
          };
          //清楚上次的表单校验
          this.$nextTick(() =>{
              this.$refs["form"].clearValidate()
          })
        },
        handleAdd(){
            this.reset();
            this.open = true;
        },
        handleUpdate(row){
            this.$router.push({
                path: "/stuEvaluation/score",
                query: { 
                    id: row.id,
                    stuEvaPlanId:row.stuEvaPlanId,
                    classId:row.classId,
                    termTimeId:row.termTimeId,
                    evaStatus:row.evaStatus
                }
            });
        },
        submitForm:function(){
            this.$refs["form"].validate(vaild =>{
                if(vaild){
                    createStuEvaTask(this.form).then(resp => {
                        if(resp.code === 200){
                            this.$message({ message: "新增成功", type: "success" });
                            this.open = false;
                            this.getList();
                        }else{
                            this.$message({ message: "新增失败", type: "error" });
                        }                         
                    })
                }
            })
        },
        getList(){
            findStuEvaTaskPageList(this.queryParams).then(resp =>{
                this.dataList = resp.data.list
                this.total = resp.data.total
                this.loading = false
            })
        },
    }
}
</script>

<style>

</style>